import React, { useState } from 'react'
import { Button, Modal, Table, Input } from 'antd'
import { useDispatch, useSelector } from 'react-redux';

import ModalFunc from '../../../components/modal/modal'
import './publishBtn.less'
import AxiosUtils from '../../../commons/axios'
import { getModelVersions } from '../../../redux/actions/pmml/pmmlAction'

const { TextArea } = Input

const columns = [
    {
        title: '版本',
        dataIndex: 'version',
        key: 'version',
        render: text => {
            return "v-" + text
        }
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime'
      }
]

const PublishBtn = props => {

    const { item, uri } = props

    const { visible, open, close } = ModalFunc()

    const [ version, setVersion ] = useState(item.currentVersion)

     // 获取store中的状态值
     const data = useSelector(state => state.versionStateReducer.versions)

     // 获取store对象中dispatch的引用
     const dispatch = useDispatch()

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows[0].version);
            if (version === selectedRows[0].version) {
                return
            }
            AxiosUtils.ajax({
                url: "/model/version",
                data: {
                    params: {
                        id: item.id,
                        version: selectedRows[0].version
                    },
                    isShowLoading: true
                },
                method: 'get'
            }).then(res => {
                if(res.code === 0) {
                    setVersion(res.data)
                }
            })
        }
    }

    function handleClick() {
        open()
        dispatch(getModelVersions(item.id))
    }

    /** 模型请求数据格式化 */
    function getRequestData() {
        let topic = item.topicName
        let data = JSON.parse(item.dataFormat)
        return JSON.stringify({
            topic: topic,
            data: data
        }, null, "\t")
    }

    /** pmml模型发布不依赖于kafka */
    function renderKafkaTopic() {
        if (item.category === 1) {
            return (
                <div className="publish-form-row">{`kafka主题：${item.topicName}`}</div>
            )
        }
        return
    }

    return (
        <>
            <Button
                key="publish"
                size="small"
                type="dashed"
                // onClick={handleClick()}
                onClick={handleClick}
            >
                发布
            </Button>
            <Modal
                title="服务发布"
                centered="true"
                visible={visible}
                onCancel={close}
                footer={null}
                bodyStyle={{height: 550}}
                width={1040}
                maskClosable={false}
            >   
                <div className="publish-wrap">
                    <div className="publish-form">
                        <div className="publish-form-row">
                            {`模型名称：${item.name}`}
                        </div>
                        <div className="publish-form-row">
                            {`模型类型：${item.categoryName}`}
                        </div>
                        <div className="publish-form-row">
                            请求类型：POST
                        </div>
                        <div className="publish-form-row">
                            {`使用版本：${version === 0 ? "未使用" : "v-" + version}`}
                        </div>
                        <div className="publish-form-row">
                            {`请求秘钥：${item.secretKey}`}
                        </div>
                        { renderKafkaTopic() }
                        <div className="publish-form-row">
                            {`请求地址：${uri}`}
                        </div>
                        <div className="publish-form-button">
                            <Button type="primary">发布</Button>
                            <Button danger>停止</Button>
                            <Button type="dashed">调试</Button>
                        </div>
                    </div>
                    <div className="publish-version">
                        <Table
                            rowSelection={{ type: "radio", ...rowSelection }}
                            size="small"
                            columns={columns} 
                            dataSource={data}
                            pagination={{ position: ["bottomRight"], defaultPageSize: 3 }}
                        />
                    </div>
                    <div className="publish-request">
                        <TextArea rows={13} value={getRequestData()}/>
                    </div>
                    <div className="publish-response">
                        <TextArea rows={8} value={uri}/> 
                    </div>
                </div>
            </Modal>
        </>
    )
}

export default PublishBtn